<template>
    <div ref="line" :style="{width:width,height:height}"></div>
</template>
<script>
export default {
  name: 'LineEchart',
  data() {
    return {
      myChart:null,
      xTitleData:[],
      Ydata:[]
    }
  },
  props:{
    width:{
      type:String,
      default:""
    },
    height:{
      type:String,
      default:""
    },
    seriesName:{
      type:String,
      default:""
    },
    unit:{
      type:String,
      default:""
    },
    color:{
      type:Array,
      default:()=>[]
    },
    splitLineShow:{
      type:Boolean,
      default:true
    },
    data:{
      type:Array,
      default:()=>{
        return [2, 7, 11, 16, 9,0,0]
      }
    },
    xData:{
      type:Array,
      default:()=>{
        return ['星期一', '星期二', '星期三', '星期四', '星期五','星期六','星期日']
      }
    },
    smooth:{
      type:Boolean,
      default:true
    },
    axisLabelShow:{
      type:Boolean,
      default:false
    },
    
  },
  watch:{
    data:{
      handler(val){
        this.getEcharts(val);
      },
      deep:true
    },
    xData:{
      handler(val){
        this.xTitleData = val;
      },
      deep:true
    }
  },
  created(){
  },
  mounted(){
    
  },
  methods: {
    setFormatter(params){
      let val = ""
      if (params == 0) {
        val = "清醒"
      }
      if (params == 1) {
        val = "浅睡"
      }
      if (params == 2) {
        val = "深睡"
      }
      return val
    },
    getEcharts(data) {
      if (
        //判断是否存在echarts实例化对象,如果存在则销毁
        this.myChart != null &&
        this.myChart != '' &&
        this.myChart != undefined
      ) {
        this.myChart.dispose()
      }
      this.myChart = this.$echarts.init(this.$refs.line) //创建echarts实例化对象

      // this.myChart.showLoading({
      //   text: 'loading',
      //   color: '#1890FF',
      //   textColor: '#000',
      //   text:"",
      //   maskColor: 'rgba(255, 255, 255, 0.2)',
      //   zlevel: 0,
      // });
      this.myChart.clear() //清空画布数据
      let _this = this;
      let optionFever = {
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(0,0,0,0.6)',
          textStyle: { // 文字提示样式
            color: '#fff',
            fontSize: '12'
          },
          borderColor: 'transparent',
          formatter:function(params){
            var relName = params[0].name;
            let relValue;
            if (_this.axisLabelShow) {
              relValue = _this.setFormatter(params[0].value);
            }else{
              relValue = params[0].value;
            }
            relName += '<br/>' + (_this.seriesName!=undefined && _this.seriesName!=''? params[0].marker+_this.seriesName +'：' : '') + relValue + _this.unit
            return relName
          }
        },
        grid: {
          left: '12%',
          top: '10%',
          right: '2%',
          bottom: '10%'
        },
        xAxis: [
          {
            
            type: 'category',
            // data: ['星期一', '星期二', '星期三', '星期四', '星期五','星期六','星期日'],
            data: this.xData,
            axisLine: {
              lineStyle: {
                color: '#666'
              }
            }
          }
        ],
        yAxis: [
          {
            name:this.unit,
            type: 'value',
            splitLine: {
              show:this.splitLineShow,
              lineStyle: {
                type: 'dashed',
                color: '#DDD'
              }
            },
            // splitNumber:this.splitNumber,
            axisLabel:{
              formatter:function(params){
                if (_this.axisLabelShow) {
                  return _this.setFormatter(params)
                }else{
                  return params
                }
              }
            },
            axisLine: {
              show: true,
              lineStyle: {
                color: '#999'
              }
            },
            nameTextStyle: {
              color: '#999'
            },
            splitArea: {
              show: false
            }
          }
        ],
        series: [
          {
            name: this.seriesName,
            type: 'line',
            data: data,
            lineStyle: {
              normal: {
                width: 2,
                color: {
                  type: 'linear',
                  x: 0,
                  y: 1,
                  x2: 1,
                  y2: 0,
                  colorStops: [
                    {
                      offset: 0,
                      // color: '#fe9a' // 0% 处的颜色
                      color: this.color[0] // 0% 处的颜色
                    },
                    {
                      offset: 1,
                      // color: '#fe9a8b' // 100% 处的颜色
                      color: this.color[1] // 100% 处的颜色
                    }
                  ],
                  globalCoord: false // 缺省为 false
                },
                // shadowColor: 'rgba(254,154,139, 0.3)',
                // shadowColor: this.color,
                // shadowBlur: 2,
                // shadowOffsetY: 10
              }
            },
            itemStyle: {
              normal: {
                // color: '#fe9a8b',
                color: this.color[1],
                borderWidth: 2,
                /*shadowColor: 'rgba(72,216,191, 0.3)',
							shadowBlur: 100,*/
                // borderColor: '#fe9a8b'
                borderColor: this.color[1]
              }
            },
            smooth: this.smooth  //折线连线平滑
          }
        ]
      }
      this.myChart.setOption(optionFever);
      window.addEventListener("resize", ()=>{
        _this.myChart.resize();
      })
    }
  }
}
</script>
<style scoped lang="less">
/* @import url(); 引入css类 */

</style>
